﻿$(document).ready(function () {
    
})

function MessageToggleOut()
{
    $("#fbMailflyout").addClass("fade");
    $("#fbflyout").addClass("fade");
    if($("#fbmessagesflyout").hasClass("fade"))
    {
        $("#fbmessagesflyout").removeClass("fade");
    }
    else
    {
        $("#fbmessagesflyout").addClass("fade");
    }
}

function MailToggleOut() {
    $("#fbflyout").addClass("fade");
    $("#fbmessagesflyout").addClass("fade");
    if ($("#fbMailflyout").hasClass("fade")) {
        $("#fbMailflyout").removeClass("fade");
    }
    else {
        $("#fbMailflyout").addClass("fade");
    }
}

function ToggleOut() {
    $("#fbMailflyout").addClass("fade");
    $("#fbmessagesflyout").addClass("fade");
    if ($("#fbflyout").hasClass("fade")) {
        $("#fbflyout").removeClass("fade");
    }
    else {
        $("#fbflyout").addClass("fade");
    }
}

function AddChatBox(elementName)
{
    var chatbox = document.getElementById("box-" + elementName);
    if (chatbox == null) {
        var str = "";
        //Header Name
        str = "<div id='box-" + elementName + "' class='chat'>";
        str += "<div class='chat-header'>";
        str += "<div class='chat-header-name'>";
        str += "<span>Nguyễn Quang Huy</span>";
        str += "</div>";
        str += "<div class='chat-header-toolbar'>";
        str += "<a class='closebutton' onclick='closeBox(\"box-" + String(elementName) + "\")'></a>";
        str += "</div>";
        str += "</div>";

        //Container
        str += "<div id='boxcontainer-" + elementName + "' class='chat-container'><ul id='container-" + elementName + "'>";

        //Message
        str += "<li>";
        str += "<img class='imgright' src='http://maxme-life.ru/tests/img2.jpg'>";
        str += "<div class='messageright'>Chào :)</div>";
        str += "</li>";
        str += "<li>";
        str += "<img class='imgleft' src='http://maxme-life.ru/tests/img1.jpg'>";
        str += "<div class='messageleft'>Chào bạn :)</div>";
        str += "</li>";
        str += "<li>";
        str += "<img class='imgright' src='http://maxme-life.ru/tests/img2.jpg'>";
        str += "<div class='messageright'>Hôm nay bạn khỏe chứ ?</div>";
        str += "</li>";
        str += "<li>";
        str += "<img class='imgleft' src='http://maxme-life.ru/tests/img1.jpg'>";
        str += "<div class='messageleft'>Mình khỏe còn bạn ?</div>";
        str += "</li>";
        str += "</ul></div>"; // End Message

        //Button

        str += "<input id='text-" + elementName + "' type='text' placeholder='Nhấp để nhập hội thoại' onkeydown='if (event.keyCode == 13) document.getElementById(\"button-" + elementName + "\").click()' /><button id='button-" + elementName + "' onclick='ChatBoxEnter(\"" + elementName + "\")'>Gửi</button>"
        str += "</div>";

        $("#fbc-chatdock").append(str);
    }
}

function closeBox(boxName)
{
    $("#" + boxName).remove();
}

function ChatBoxEnter(elementName)
{
    var textBoxValue = $("#text-" + elementName).val();
    var str = "<li>";
    str += "<img class='imgright' src='http://maxme-life.ru/tests/img2.jpg'>";
    str += "<div class='messageright'>" + textBoxValue + "</div>";
    str += "</li>";
    $("#container-" + elementName).append(str);
    var objDiv = document.getElementById("boxcontainer-" + elementName);
    objDiv.scrollTop = objDiv.scrollHeight;
}